<template>
	<n-popover
		:show-arrow="false"
		:to="false"
		:show="showPopover"
		:content-style="{ padding: 0 }"
		placement="bottom-end"
		trigger="click"
		@update:show="handleUpdateShow">
		<template #trigger>
			<div class="cursor-pointer flex text-t-1">
				{{ $t('slotsall.providers') }}
				<div class="flex-1"></div>
				<base-icon
					name="down2"
					class="ml-1 text-sm duration-300"
					:class="{
						'rotate-180': showPopover
					}"></base-icon>
			</div>
		</template>
		<div v-if="multiple" class="rounded-sm overflow-hidden" @click.stop>
			<!-- <div
				class="flex h-[44px] px-[14px] items-center t-text-3 cursor-not-allowed justify-between bg-bg-4">
				<n-checkbox
					disabled
					:checked="checkedAll"
					:indeterminate="checkedHalf"
					:label="$t('tip.selected')" />
				<span>{{ `${selectList.length}/${supplierList.length}` }}</span>
			</div> -->
			<n-checkbox-group :value="selectList" :on-update:value="updateSelect">
				<div
					v-for="item in supplierList"
					:key="item.id"
					:class="{
						'text-t-1': item.gameCount || item.entranceCount,
						'app-bg-react': item.gameCount || item.entranceCount,
						't-text-3': !(item.gameCount || item.entranceCount),
						'cursor-not-allowed': !(item.gameCount || item.entranceCount),
						'bg-bg-3':
							type === 'casino'
								? selectList.indexOf(item.pid) !== -1
								: selectList.indexOf(item.id) !== -1
					}"
					class="flex h-[40px] px-[14px] items-center">
					<n-checkbox
						:disabled="!item.gameCount && !item.entranceCount"
						:value="type === 'casino' ? item.pid : item.id"
						:label="item.portalDisplayName || item.providerName" />
					<span class="text-primary">{{ item.gameCount || item.entranceCount }}</span>
				</div>
			</n-checkbox-group>
		</div>
		<div v-else class="rounded-sm overflow-hidden">
			<div
				v-for="item in supplierList"
				:key="type === 'casino' ? item.id : item.pid"
				@click="updateSelect(item)"
				:class="{
					'app-bg-react': item.gameCount || item.entranceCount,
					'text-t-3': !item.gameCount && !item.entranceCount,
					'cursor-not-allowed': !item.gameCount && !item.entranceCount,
					'bg-bg-3':
						type === 'casino'
							? selectList.indexOf(item.pid) !== -1
							: selectList.indexOf(item.id) !== -1
				}"
				class="flex h-[40px] px-[14px] items-center">
				<span>{{ item.portalDisplayName || item.providerName }}</span>
				<span class="text-primary ml-1">{{ item.gameCount || item.entranceCount }}</span>
			</div>
		</div>
		<!-- <template #footer>
			<div v-if="multiple" class="flex flex-row-reverse h-[27px] items-center">
				<base-button
					@click="handleFilter"
					class="ml-2"
					:block="false"
					type="primary"
					size="tiny"
					textT="action.confirm"></base-button>
				<base-button
					@click="handleCancel"
					:block="false"
					size="tiny"
					textT="action.cancel"></base-button>
			</div>
		</template> -->
	</n-popover>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { BaseIcon } from '@/components/base'
import { NPopover, NCheckboxGroup, NCheckbox } from 'naive-ui'
import { useSlotStore, useCasinoStore } from '@/store'

const slotStore = useSlotStore()
const casinoStore = useCasinoStore()
const showPopover = ref(false)
const selectList: any = ref([])

const props = defineProps({
	defaultValue: {
		type: Number,
		default: 0
	},
	multiple: {
		type: Boolean,
		default: false
	},
	type: {
		type: String,
		default: 'slots'
	}
})

const emit = defineEmits(['change'])

const supplierList = computed(() => {
	if (props.type === 'casino') {
		return casinoStore.providerList.filter((item: any) => item.isComming === 0)
	}
	return slotStore.providerList.filter((item: any) => item.displayType === 0)
})

// const checkedAll = computed(() => {
// 	return selectList.value.length === supplierList.value.length
// })

// const checkedHalf = computed(() => {
// 	return selectList.value.length && selectList.value.length < supplierList.value.length
// })

const handleUpdateShow = (show: boolean) => {
	showPopover.value = show
}

const updateSelect = (val: any) => {
	if (props.multiple) {
		selectList.value = val
		handleFilter()
	} else {
		if (!val.gameCount && !val.entranceCount) return
		if (
			!selectList.value[0] ||
			(selectList.value[0] !== val.pid && selectList.value[0] !== val.pid)
		) {
			selectList.value = [val.id || val.pid]
			handleFilter()
		}
	}
}

const handleFilter = () => {
	emit('change', selectList.value)
	if (!props.multiple) {
		showPopover.value = false
	}
}

onMounted(() => {
	if (props.defaultValue) {
		selectList.value = [props.defaultValue]
	}
})
</script>
